﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Product Page</title>

    <link rel="preconnect" href="https://fonts.gstatic.com"/>
    <link href="static/css/fc1ab68d70ad48e88943ce422f4566dc.css" rel="stylesheet"/>
    <link rel="stylesheet" href="static/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/bootstrap-select.min.css"/>
    <link rel="stylesheet" href="static/css/animate.min.css"/>
    <link rel="stylesheet" href="static/css/all.min.css"/>
    <link rel="stylesheet" href="static/css/jarallax.css"/>
    <link rel="stylesheet" href="static/css/organik-icons.css"/>
    <link rel="stylesheet" href="static/css/jquery.magnific-popup.css"/>
    <link rel="stylesheet" href="static/css/nouislider.min.css"/>
    <link rel="stylesheet" href="static/css/nouislider.pips.css"/>
    <link rel="stylesheet" href="static/css/odometer.min.css"/>
    <link rel="stylesheet" href="static/css/swiper.min.css"/>
    <link rel="stylesheet" href="static/css/tiny-slider.min.css"/>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/common_js.js" type="text/javascript"></script>
    <script src="js/footer.js" type="text/javascript"></script>
    <link rel="stylesheet" href="static/css/organik.css"/>
    <script>
        //当文档加载完成后再执行
        $(document).ready(function () {
            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/isLogin.do",
                dataType: "json",
                type: "get",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function (result) {
                    if (result.flag == 1) {
                        //说明已经登录
                        $("#logininfo").html("欢迎你，" + result.data.userName + "&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='loginout()'>注销</a>");
                        $("#userinfo").html("<ul class=\"main-menu__list\"><li class=\"dropdown\"><a href='index.html'><i className='organik-icon-user'></i>个人中心</a> " +
                            "<ul>\n" +
                            "<li>\n" +
                            "<a href=\"userinfo.html\">个人信息修改</a></li>\n" +
                            "<li><a href=\"index-2.html\">发布自己的元产品</a></li>\n" +
                            " <li><a href=\"index-2.html\">显示个人信息</a></li>\n" +
                            " <li><a href=\"index-2.html\">交易记录</a></li>\n" +
                            " <li><a href=\"index-2.html\">个人产品</a></li>\n" +
                            "</li>\n" +
                            "</ul>" +
                            "</li>"
                        );
                    } else {
                        //说明未登录
                        $("#logininfo").html("<a href='login.html' class='green'>登录</a> /<a href='register.html' class='green'>免费注册</a>");
                    }
                }
            });

        });
    </script>
    <script>
        function loginout() {
            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/loginOut.do",
                dataType: "json",
                type: "get",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function (result) {
                    alert(result.msg);
                    //跳转到登录页面？刷新页面
                    location.reload();
                }
            });


        }
    </script>
    <script>
        //获取cookie来搜索产品详情
        //当文档加载完成后再执行
        $(document).ready(function () {
            //获取cookie代码
            var getCookie = function (name) {
                var arr;
                var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg)) {
                    return arr[2];
                } else
                    return null;
            };

            //点击获取按钮之后调用的函数
            /*function getcookie() {
                console.log(getCookie("userName"));
                console.log(getCookie("password"))
            }*/
         //var goodId=getCookie("goodId");
         var goodId=window.localStorage.getItem('goodId');
         $.ajax({
          url: "http://localhost:8088/UniverseFarmBack/getSoilGoodById.do",
          dataType: "json",
          data:{soilid:goodId},
          type: "get",
          xhrFields: {
           withCredentials: true
          },
          crossDomain: true,
          success: function (result) {
           if (result.flag == 1) {
            //说明找到产品
            $("#good_name").html(result.data.soilName);
            $("#good_price").html("￥"+result.data.soilPrice);
            $("#good_img").html("<img src='http://localhost:8088/UniverseFarmBack/static/picture/goods/"+result.data.soilPhoto +"' alt=''>");
            $("#good_des").html(result.data.soilDes);

               $("#good_add").html("<button className='thm-btn' type='submit' onClick='add("+goodId+")'>Add to Cart</button>");
           } else {
            //说明未找到产品
            $("#good_name").html("找不到该ID的产品："+goodId);
            $("#good_price").html("￥ NULL");
            //此处可以替换为NULL图片
            $("#good_img").html("<img src='static/picture/product-d-1.jpg' alt=''>");}
          }
         });


        });
    </script>
    <script>
        function add(goodId) {
            $.ajax({
                url: "http://localhost:8088/UniverseFarmBack/addCart.do",
                dataType: "json",
                data: {soilinfoid: goodId},
                type: "get",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function (result) {
                    alert(result.msg);
                    //跳转到登录页面？刷新页面
                    // location.reload();
                }
            });
        }
    </script>
</head>
<body>
<div class="preloader">
    <img class="preloader__image" width="55" src="static/picture/loader.png" alt=""/>
</div>

<div class="page-wrapper">
    <header class="main-header">
        <div class="topbar">
            <div class="container">
                <div id="logininfo"></div>
                <div class="main-logo">
                    <a href="index.html" class="logo">
                        <img src="static/picture/universe.PNG" width="300" alt="">
                    </a>
                    <div class="mobile-nav__buttons">
                        <a href="#" class="search-toggler"><i class="organik-icon-magnifying-glass"></i></a>
                        <a href="#" class="mini-cart__toggler"><i class="organik-icon-shopping-cart"></i></a>
                    </div>
                    <span class="fa fa-bars mobile-nav__toggler"></span>
                </div>
                <div class="topbar__left">
                    <div class="topbar__social">
                        <a href="#" class="fab fa-twitter"></a>
                        <a href="#" class="fab fa-facebook-square"></a>
                        <a href="#" class="fab fa-instagram"></a>
                    </div>
                    <div class="topbar__info">
                        <i class="organik-icon-email"></i>
                        <p>Email <a href="/cdn-cgi/l/email-protection#8de4e3ebe2cde2ffeaece3e4e6a3eee2e0"><span
                                class="__cf_email__" data-cfemail="90f9fef6ffd0ffe2f7f1fef9fbbef3fffd">[email&#160;protected]</span></a>
                        </p>
                    </div>
                </div>
                <div class="topbar__right">
                    <div class="topbar__info">
                        <i class="organik-icon-calling"></i>
                        <p>Phone <a href="tel:+92-666-888-0000">92 666 888 0000</a></p>
                    </div>
                    <div class="topbar__buttons">
                        <a href="#" class="search-toggler"><i class="organik-icon-magnifying-glass"></i></a>
                        <a href="#" class="mini-cart__toggler"><i class="organik-icon-shopping-cart"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <nav class="main-menu">
            <div class="container">
                <!--个人信息页面-->
                <div class="main-menu__login" id="userinfo">
                </div>
                <ul class="main-menu__list">
                    <li class="dropdown">
                        <a href="index.html">主页</a>
                        <ul>
                            <li><a href="index.html">主界页</a></li>
                            <li><a href="#shangpin">商品</a></li>
                            <li><a href="#jianjie">简介</a></li>
                            <li><a href="#gonglue">攻略</a></li>
                            <!--<li class="dropdown">
                                <a href="#">Header Styles</a>
                                <ul>
                                    <li><a href="index.html">Header One</a></li>
                                    <li><a href="index-2.html">Header Two</a></li>
                                </ul>
                            </li>-->
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="products.html">交易市场</a>
                        <!--<ul>
                            <li><a href="products.html">Shop</a></li>
                            <li><a href="product-details.html">Product Details</a></li>
                            <li><a href="cart.html">Cart Page</a></li>
                            <li><a href="checkout.html">Checkout</a></li>
                        </ul>-->
                    </li>
                    <li class="dropdown"><a href="cart.html">购物车</a>
                        <!--<ul>
                            <li><a href="news.html">购物车</a></li>
                            <li><a href="news-details.html">News Details</a></li>
                        </ul>-->
                    </li>
                    <li><a href="mysoils.html">个人农场</a></li>
                    <li><a href="soils.html">农场社区</a></li>
                </ul>
                <!--<li>
                <a href="about.html">About</a>
                </li>-->
                <!--<li class="dropdown">
                    <a href="products.html">Shop</a>
                    <ul>
                        <li><a href="products.html">Shop</a></li>
                        <li><a href="product-details.html">Product Details</a></li>
                        <li><a href="cart.html">Cart Page</a></li>
                        <li><a href="checkout.html">Checkout</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="news.html">News</a>
                    <ul>
                        <li><a href="news.html">News</a></li>
                        <li><a href="news-details.html">News Details</a></li>
                    </ul>
                </li>
                <li><a href="soils.html">Contact</a></li>
            </ul>-->
                <div class="main-menu__language">
                    <img src="static/picture/flag-1-0.jpg" alt="">
                    <label class="sr-only" for="language-select">选择语言</label>

                    <select class="selectpicker" id="language-select-header">
                        <option value="english">中文</option>
                        <option value="arabic">英语</option>
                    </select>
                </div>
            </div>
        </nav>
    </header>
    <div class="stricky-header stricked-menu main-menu">
        <div class="sticky-header__content"></div>
    </div>
    <section class="page-header">
        <div class="page-header__bg" style="background-image: url(static/images/page-header-bg-1-1.jpg);"></div>

        <div class="container">
            <h2>Product</h2>
            <ul class="thm-breadcrumb list-unstyled">
                <li><a href="index.html">主页</a></li>
                <li>/</li>
                <li><span>产品详情</span></li>
            </ul>
        </div>
    </section>
    <section class="product_detail">
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-lg-6">
                    <div class="product_detail_image" id="good_img">
                        <!--此处插入产品图片-->
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6">
                    <div class="product_detail_content">
                        <h2 id="good_name"><!--Apples--></h2>
                        <div class="product_detail_review_box">
                            <div class="product_detail_price_box">
                                <p id="good_price"><!--$9.98--></p>
                            </div>
                            <div class="product_detail_review">
                                <!--星级，以后可以数据库多加个个字段搞-->
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#" class="deactive"><i class="fa fa-star"></i></a>
                                <!--<span>2 Customer Reviews</span>-->
                            </div>
                        </div>
                        <div class="product_detail_text" >
                            <p id="good_des"><!--此处插入商品简介--></p>
                        </div>
                        <!--<ul class="list-unstyled product_detail_address">
                            <li>REF. 4231/406</li>
                            <li>Available in store</li>
                        </ul>-->
                        <div class="product-quantity-box">
                            <!--设置购买个数的框，以后可以用-->
                            <!--<div class="quantity-box">
                                <button type="button" class="sub">-</button>
                                <input type="number" id="2" value="1"/>
                                <button type="button" class="add">+</button>
                            </div>-->
                            <div class="addto-cart-box" id="good_add">

                            </div>
                            <!--<div class="wishlist_btn">
                                <a href="#" class="thm-btn">Add to Wishlist</a>
                            </div>-->
                        </div>
                        <!--<ul class="list-unstyled category_tag_list">
                            <li><span>Category:</span> Food</li>
                            <li><span>Tags:</span> Vegetables, Fruits</li>
                        </ul>-->
                        <div class="product_detail_share_box">
                            <div class="share_box_title">
                                <h2>Share with friends</h2>
                            </div>
                            <div class="share_box_social">
                                <a href="#"><i class="fab fa-facebook-square"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="row">
                <div class="col-xl-12">
                    <div class="product-tab-box tabs-box">
                        <ul class="tab-btns tab-buttons clearfix list-unstyled">
                            <li data-tab="#desc" class="tab-btn"><span>description</span></li>
                            <li data-tab="#addi__info" class="tab-btn"><span>Additional info</span></li>
                            &lt;!&ndash;<li data-tab="#review" class="tab-btn active-btn"><span>reviews</span></li>&ndash;&gt;
                        </ul>
                        <div class="tabs-content">
                            <div class="tab" id="desc">
                                <div class="product-details-content">
                                    <div class="desc-content-box">
                                        <p>Lorem ipsum dolor sit amet sectetur adipiscin elit cras feuiat antesed
                                            ces condimentum viverra duis autue nim convallis id diam vitae duis
                                            egety dictum erosin dictum sem. Vivamus sed molestie sapien aliquam et
                                            facilisis arcu dut molestie augue suspendisse sodales tortor nunced quis
                                            cto ligula posuere cursus keuis aute irure dolor in reprehenderit in
                                            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                                            sint occaecated cupidatat non proident sunt in culpa qui officia
                                            deserunt mollit anim id est laborum ivamus sed molestie sapien.</p>
                                        <p class="desc-content-box_bottom">Aliquam et facilisis arcuut olestie
                                            augue. Suspendisse sodales tortor nunc quis auctor ligula posuere cursus
                                            duis aute irure dolor in reprehenderit in voluptate velit esse cill
                                            doloreeu fugiat nulla pariatur excepteur sint occaecat cupidatat non
                                            proident sunt in culpa qui officia deserunt mollit anim id est laborum.
                                            Vivaus sed delly molestie sapien. Aliquam et facilisis arcuut molestie
                                            augue. </p>
                                    </div>
                                </div>
                            </div>
                            <div class="tab" id="addi__info">
                                <ul class="additionali_nfo list-unstyled">
                                    <li><span>Weight:</span>3kg</li>
                                    <li><span>Category:</span>Food</li>
                                    <li><span>Tags:</span>Vegetables, Fruits</li>
                                </ul>
                            </div>
                            &lt;!&ndash;<div class="tab active-tab" id="review">
                                <div class="reviews-box">
                                    <div class="row">
                                        <div class="col-xl-12">
                                            <div class="product_reviews_box">
                                                <h3 class="product_reviews_title">2 Product reviews</h3>
                                                <div class="product_reviews_single">
                                                    <div class="product_reviews_image">
                                                        <img src="static/picture/review-1.jpg" alt="">
                                                    </div>
                                                    <div class="product_reviews_content">
                                                        <h3>Kevin Martins<span>15 Nov, 2019</span></h3>
                                                        <p>Lorem ipsum is simply free text used by copytyping
                                                            refreshing.
                                                            Neque porro est qui dolorem ipsum quia quaed inventore
                                                            veritatis
                                                            et quasi architecto beatae vitae dicta sunt explicabo.</p>
                                                        <div class="product_reviews_rating product_detail_review">
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#" class="deactive"><i class="fa fa-star"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="product_reviews_single">
                                                    <div class="product_reviews_image">
                                                        <img src="static/picture/review-2.jpg" alt="">
                                                    </div>
                                                    <div class="product_reviews_content">
                                                        <h3>Kevin Martins<span>15 Nov, 2019</span></h3>
                                                        <p>Lorem ipsum is simply free text used by copytyping
                                                            refreshing.
                                                            Neque porro est qui dolorem ipsum quia quaed inventore
                                                            veritatis
                                                            et quasi architecto beatae vitae dicta sunt explicabo.</p>
                                                        <div class="product_reviews_rating product_detail_review">
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#"><i class="fa fa-star"></i></a>
                                                            <a href="#" class="deactive"><i class="fa fa-star"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-12">
                                            <div class="add_review_box">
                                                <h3 class="add_review_title">Add a review</h3>
                                                <div class="add_review_rating">
                                                    <span>Rate this Product?</span>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#"><i class="fa fa-star"></i></a>
                                                    <a href="#" class="deactive"><i class="fa fa-star"></i></a>
                                                </div>
                                                <form class="add_review_form" action="#">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="input-box">
                                                                <textarea name="review" placeholder="Write review"
                                                                          required=""></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="input-box">
                                                                <input type="text" name="name" placeholder="Full name"
                                                                       required="">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="input-box">
                                                                <input type="email" name="email"
                                                                       placeholder="Email address" required="">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xl-12">
                                                            <div class="review_submit_btn">
                                                                <a href="#" class="thm-btn">Submit Review</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>&ndash;&gt;
                        </div>
                    </div>
                </div>
            </div>-->
        </div>
    </section>
    <!--<section class="product-two">
        <div class="container">
            <div class="block-title text-center">
                <div class="block-title__decor"></div>
                <p>Recently Added</p>
                <h3>Similar Products</h3>
            </div>
            <div class="thm-tiny__slider" id="product-two__carousel" data-tiny-options='{
            "container": "#product-two__carousel",
            "items": 1,
            "slideBy": "page",
            "gutter": 0,
            "mouseDrag": true,
            "autoplay": true,
            "nav": false,
            "controlsPosition": "bottom",
            "controlsText": ["<i class=\"fa fa-angle-left\"></i>", "<i class=\"fa fa-angle-right\"></i>"],
            "autoplayButtonOutput": false,
            "responsive": {
                "640": {
                  "items": 2,
                  "gutter": 30
                },
                "992": {
                  "gutter": 30,
                  "items": 3
                },
                "1200": {
                  "disable": true
                }
              }
        }'>
                <div>
                    <div class="product-card__two">
                        <div class="product-card__two-image">
                            <span class="product-card__two-sale">sale</span>
                            <img src="static/picture/product-2-1.jpg" alt="">
                            <div class="product-card__two-image-content">
                                <a href="#"><i class="organik-icon-visibility"></i></a>
                                <a href="#"><i class="organik-icon-heart"></i></a>
                                <a href="cart.html"><i class="organik-icon-shopping-cart"></i></a>
                            </div>
                        </div>
                        <div class="product-card__two-content">
                            <h3><a href="product-details.html">Banana</a></h3>
                            <div class="product-card__two-stars">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                            <p>$1.00</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="product-card__two">
                        <div class="product-card__two-image">
                            <img src="static/picture/product-2-2.jpg" alt="">
                            <div class="product-card__two-image-content">
                                <a href="#"><i class="organik-icon-visibility"></i></a>
                                <a href="#"><i class="organik-icon-heart"></i></a>
                                <a href="cart.html"><i class="organik-icon-shopping-cart"></i></a>
                            </div>
                        </div>
                        <div class="product-card__two-content">
                            <h3><a href="product-details.html">Olive Oil</a></h3>
                            <div class="product-card__two-stars">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                            <p>$7.00</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="product-card__two">
                        <div class="product-card__two-image">
                            <img src="static/picture/product-2-3.jpg" alt="">
                            <div class="product-card__two-image-content">
                                <a href="#"><i class="organik-icon-visibility"></i></a>
                                <a href="#"><i class="organik-icon-heart"></i></a>
                                <a href="cart.html"><i class="organik-icon-shopping-cart"></i></a>
                            </div>
                        </div>
                        <div class="product-card__two-content">
                            <h3><a href="product-details.html">Eggs</a></h3>
                            <div class="product-card__two-stars">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                            <p>$3.00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>-->
    <footer class="site-footer background-black-2">
        <img src="static/picture/footer-bg-1-1.png" alt="" class="site-footer__shape-1">
        <img src="static/picture/footer-bg-1-2.png" alt="" class="site-footer__shape-2">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                    <div class="footer-widget footer-widget__about-widget">
                        <a href="index.html" class="footer-widget__logo">
                            <img src="static/picture/universe.PNG" alt="" width="250" height="80">
                        </a>
                        <p class="thm-text-dark">
                            请相信快乐的想法，从没有离开过我们的身旁，<br>
                            就像网络上虚拟的农场，终会成为现实的天堂。
                        </p>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-2">
                    <div class="footer-widget footer-widget__contact-widget">
                        <h3 class="footer-widget__title">联系我们</h3>
                        <ul class="list-unstyled footer-widget__contact">
                            <li>
                                <i class="fa fa-phone-square"></i>
                                <a href="tel:18360495939">18360495939</a>
                            </li>
                            <li>
                                <i class="fa fa-envelope"></i>
                                <a href="/cdn-cgi/l/email-protection#8be2e5ede4cbe8e4e6fbeae5f2a5e8e4e6"><span
                                        class="__cf_email__" data-cfemail="620b0c040d22010d0f12030c1b4c010d0f">1776356421@qq.com</span></a>
                            </li>
                            <li>
                                <i class="fa fa-map-marker-alt"></i>
                                <a href="#">福建省厦门市集美大学诚毅学院
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-2">
                    <div class="footer-widget footer-widget__links-widget">
                        <h3 class="footer-widget__title">为你推荐</h3>
                        <ul class="list-unstyled footer-widget__links">
                            <li>
                                <a href="index.html">热卖榜单</a>
                            </li>
                            <li>
                                <a href="products.html">购物</a>
                            </li>
                            <li>
                                <a href="about.html">关于我们</a>
                            </li>
                            <li>
                                <a href="contact.html">反馈</a>
                            </li>
                            <li>
                                <a href="contact.html">客服</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-2">
                    <div class="footer-widget">
                        <h3 class="footer-widget__title">配送方式</h3>
                        <ul class="list-unstyled footer-widget__links">
                            <li>
                                <a href="products.html">上门自提</a>
                            </li>
                            <li>
                                <a href="checkout.html">211限时达</a>
                            </li>
                            <li>
                                <a href="contact.html">配送服务查询</a>
                            </li>
                            <li>
                                <a href="contact.html">海外配送</a>
                            </li>
                            <li>
                                <a href="contact.html">配送费收取标准</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
                    <div class="footer-widget">
                        <h3 class="footer-widget__title">售后服务</h3>
                        <form action="#" data-url="YOUR_MAILCHIMP_URL" class="mc-form">
                            <input type="email" name="EMAIL" id="mc-email" placeholder="退款说明">
                            <button type="submit">价格保护</button>
                        </form>
                        <div class="mc-form__response"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-footer">
            <div class="container">
                <hr>
                <div class="inner-container text-center">
                    <div class="bottom-footer__social">
                        <a href="#" class="fab fa-twitter"></a>
                        <a href="#" class="fab fa-facebook-square"></a>
                        <a href="#" class="fab fa-instagram"></a>
                    </div>

                </div>
            </div>
        </div>
    </footer>
</div>
<div class="mobile-nav__wrapper">
    <div class="mobile-nav__overlay mobile-nav__toggler"></div>

    <div class="mobile-nav__content">
        <span class="mobile-nav__close mobile-nav__toggler"><i class="organik-icon-close"></i></span>
        <div class="logo-box">
            <a href="index.html" aria-label="logo image"><img src="static/picture/logo-light.png" width="155"
                                                              alt=""/></a>
        </div>

        <div class="mobile-nav__container"></div>

        <ul class="mobile-nav__contact list-unstyled">
            <li>
                <i class="organik-icon-email"></i>
                <a href="/cdn-cgi/l/email-protection#a1cfc4c4c5c9c4cdd1e1ced3c6c0cfc8ca8fc2cecc"><span
                        class="__cf_email__" data-cfemail="533d3636373b363f23133c2134323d3a387d303c3e">[email&#160;protected]</span></a>
            </li>
            <li>
                <i class="organik-icon-calling"></i>
                <a href="tel:666-888-0000">666 888 0000</a>
            </li>
        </ul>
        <div class="mobile-nav__top">
            <div class="mobile-nav__language">
                <img src="static/picture/flag-1-1.jpg" alt="">
                <label class="sr-only" for="language-select">select language</label>

                <select class="selectpicker" id="language-select">
                    <option value="english">English</option>
                    <option value="arabic">Arabic</option>
                </select>
            </div>
            <div class="main-menu__login">
                <a href="#"><i class="organik-icon-user"></i>Login / Register</a>
            </div>
        </div>
    </div>

</div>

<div class="mini-cart">
    <div class="mini-cart__overlay mini-cart__toggler"></div>
    <div class="mini-cart__content">
        <div class="mini-cart__top">
            <h3 class="mini-cart__title">Shopping Cart</h3>
            <span class="mini-cart__close mini-cart__toggler"><i class="organik-icon-close"></i></span>
        </div>
        <div class="mini-cart__item">
            <img src="static/picture/cart-1-1.jpg" alt="">
            <div class="mini-cart__item-content">
                <div class="mini-cart__item-top">
                    <h3><a href="product-details.html">Banana</a></h3>
                    <p>$9.99</p>
                </div>
                <div class="quantity-box">
                    <button type="button" class="sub">-</button>
                    <input type="number" id="2" value="1"/>
                    <button type="button" class="add">+</button>
                </div>
            </div>
        </div>
        <div class="mini-cart__item">
            <img src="static/picture/cart-1-2.jpg" alt="">
            <div class="mini-cart__item-content">
                <div class="mini-cart__item-top">
                    <h3><a href="product-details.html">Tomato</a></h3>
                    <p>$9.99</p>
                </div>
                <div class="quantity-box">
                    <button type="button" class="sub">-</button>
                    <input type="number" id="2" value="1"/>
                    <button type="button" class="add">+</button>
                </div>
            </div>
        </div>
        <div class="mini-cart__item">
            <img src="static/picture/cart-1-3.jpg" alt="">
            <div class="mini-cart__item-content">
                <div class="mini-cart__item-top">
                    <h3><a href="product-details.html">Bread</a></h3>
                    <p>$9.99</p>
                </div>
                <div class="quantity-box">
                    <button type="button" class="sub">-</button>
                    <input type="number" id="2" value="1"/>
                    <button type="button" class="add">+</button>
                </div>
            </div>
        </div>
        <a href="checkout.html" class="thm-btn mini-cart__checkout">Proceed To Checkout</a>
    </div>
</div>
<div class="search-popup">
    <div class="search-popup__overlay search-toggler"></div>

    <div class="search-popup__content">
        <form action="#">
            <label for="search" class="sr-only">search here</label>
            <input type="text" id="search" placeholder="Search Here..."/>
            <button type="submit" aria-label="search submit" class="thm-btn">
                <i class="organik-icon-magnifying-glass"></i>
            </button>
        </form>
    </div>

</div>

<a href="#" data-target="html" class="scroll-to-target scroll-to-top"><i class="fa fa-angle-up"></i></a>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="static/js/bootstrap-select.min.js"></script>
<script src="static/js/jarallax.min.js"></script>
<script src="static/js/jquery.ajaxchimp.min.js"></script>
<script src="static/js/jquery.appear.min.js"></script>
<script src="static/js/jquery.circle-progress.min.js"></script>
<script src="static/js/jquery.magnific-popup.min.js"></script>
<script src="static/js/jquery.validate.min.js"></script>
<script src="static/js/nouislider.min.js"></script>
<script src="static/js/odometer.min.js"></script>
<script src="static/js/swiper.min.js"></script>
<script src="static/js/tiny-slider.min.js"></script>
<script src="static/js/wnumb.min.js"></script>
<script src="static/js/wow.js"></script>
<script src="static/js/isotope.js"></script>
<script src="static/js/countdown.min.js"></script>

<script src="static/js/organik.js"></script>
</body>
</html>